<template>
  <div class="login-container">
    <SvgBackground ></SvgBackground>
    <!-- 登录页的头部 -->
    <!-- <div class="login-head" style="z-index: 5">
      <div class="logo-title">
        <el-image class="logo-img" :src="require('../../assets/img/logo.png')"></el-image>
        <div class="text">连锁行业监管平台</div>
      </div>
      <div class="avatar-account">
        <i class="iconfont icon-touxiang"></i>
        <span>未登录</span>
      </div>
    </div> -->

    <!-- 登录的卡片输入区 -->
    <div class="login-card">
      <div class="title-container">
        <div class="title-text">连锁行业监管平台</div>
        <div class="title-remark">前所未有的管理体验</div>
      </div>

      <!-- 1 密码登录 -->
      <el-form v-if="user_status == 10" ref="loginForm" :model="loginForm" :rules="rules" autocomplete="on"
        label-position="left">
        <div class="title-toggle">
          <span class="title-toggle-child" :class="user_status == 10 ? 'title_active' : 'title_default'"
            @click="changeUserStatus(10)">密码登录</span>
          <span class="title-toggle-child" :class="user_status == 11 ? 'title_active' : 'title_default'"
            @click="changeUserStatus(11)">验证码登录</span>
        </div>
        <el-form-item prop="userac">
          <el-input clearable @clear="clearPW" ref="userac" key="login" v-model="loginForm.userac" placeholder="邮箱/用户名/手机号" name="userac"
            type="text" tabindex="1" autocomplete="off">
            <i class="iconfont icon-yonghu" slot="prefix"></i>
          </el-input>
        </el-form-item>

        <el-tooltip v-model="login_tooltip" content="打开了大写!" placement="right" manual>
          <el-form-item>
            <el-input :key="password_type" ref="password" v-model="loginForm.password" :type="password_type"
              placeholder="请输入登入密码" name="password" tabindex="2" autocomplete="off"
              @keyup.native="checkCapslock(10, $event)" @blur="login_tooltip = false"
              @keyup.enter.native="handleLogin(10)">
              <i class="iconfont icon-mima" slot="prefix"></i>
              <span class="show-pwd" @click="showPwd(10)" slot="suffix">
                <svg-icon :icon-class="password_type === 'password' ? 'eye' : 'eye-open' " />
              </span>
            </el-input>
          </el-form-item>
        </el-tooltip>

        <div class="remember-forget">
          <div class="remember">
            <el-checkbox v-model="loginForm.remember">自动登录</el-checkbox>
          </div>
          <div class="cut-forget" @click="changeUserStatus(20)">忘记密码</div>
        </div>
        <div class="login-footer">
          <el-button :class="login_loading ? 'footer-active' : 'footer-default'" :loading="login_loading"
            @click.native.prevent="handleLogin(10)">登录</el-button>
        </div>
        <div class="cut-register" @click="changeUserStatus(0)">注册账户</div>
      </el-form>

      <!-- 2. 验证码登录 -->
      <el-form v-if="user_status == 11" ref="verifyForm" :model="verifyForm" :rules="rules" autocomplete="on"
        label-position="left">
        <div class="title-toggle">
          <span class="title-toggle-child" :class="user_status == 10 ? 'title_active' : 'title_default'"
            @click="changeUserStatus(10)">密码登录</span>
          <span class="title-toggle-child" :class="user_status == 11 ? 'title_active' : 'title_default'"
            @click="changeUserStatus(11)">验证码登录</span>
        </div>
        <el-form-item prop="userac">
          <el-input ref="userac" key="verify" v-model="verifyForm.userac" placeholder="邮箱/手机号" name="userac" type="text"
            tabindex="1" autocomplete="off">
            <i class="iconfont icon-yonghu" slot="prefix"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="verify">
          <el-input key="verify_login" ref="verify_login" v-model="verifyForm.verify" type="text" placeholder="验证码"
            name="verify" tabindex="2" autocomplete="off" style="width: 60%" @keyup.enter.native="handleLogin(11)">
            <i class="iconfont icon-youzhengfuwu" slot="prefix"></i>
          </el-input>

          <div class="verify-mess" :class="verify_css(verify_login_btn_disable)"
            @click="getVerifyMsg2(11, verifyForm.userac)"> {{ verify_btn }}</div>
        </el-form-item>

        <div class="remember-forget">
          <div class="remember">
            <el-checkbox v-model="verifyForm.remember">自动登录</el-checkbox>
          </div>
          <div class="cut-forget" @click="changeUserStatus(20)">忘记密码</div>
        </div>
        <div class="login-footer">
          <el-button :class="verify_loading ? 'footer-active' : 'footer-default'" :loading="verify_loading"
            @click.native.prevent="handleLogin(11)">登录</el-button>
        </div>
        <div class="cut-register" @click="changeUserStatus(0)">注册账户</div>
      </el-form>

      <!-- 3. 忘记密码 -->
      <el-form v-if="user_status == 20" ref="forgetForm" :model="forgetForm" :rules="rules" class="container-form"
        autocomplete="off" label-position="left">
        <div class="title-forget">找回密码</div>
        <el-form-item prop="userac">
          <el-input ref="userac" key="forget" v-model="forgetForm.userac" placeholder="邮箱/手机号/用户名" name="userac"
            type="text" tabindex="1" autocomplete="off" @blur="useracRepet(20)">
            <span class="forget-tip" slot="suffix" v-text="userac_forget_has" />
          </el-input>
        </el-form-item>

        <el-form-item prop="verify">
          <el-input key="verify" ref="verify" v-model="forgetForm.verify" type="text" placeholder="输入验证码" name="verify"
            tabindex="2" autocomplete="off" style="width: 60%" />
          <div class="verify-mess" :class="verify_css(verify_forget_btn_disable)"
            @click="getVerifyMsg3(20, forgetForm.userac)">{{ forget_btn }}</div>
        </el-form-item>

        <el-tooltip v-model="forget_tooltip" content="打开了大写!" placement="right" manual>
          <el-form-item prop="password">
            <el-input :key="password_type_forget" ref="password_forget" v-model="forgetForm.password"
              :type="password_type_forget" placeholder="6 - 16 位新密码" name="password_forget" tabindex="2"
              autocomplete="off" @keyup.native="checkCapslock(20, $event)" @blur="forget_tooltip = false" />
            <span class="show-pwd" @click="showPwd(20)">
              <svg-icon :icon-class="password_type_forget === 'password' ? 'eye' : 'eye-open' " />
            </span>
          </el-form-item>
        </el-tooltip>

        <el-tooltip v-model="forget2_tooltip" content="打开了大写!" placement="right" manual>
          <el-form-item>
            <el-input :key="password_type_forget2" ref="password_forget2" v-model="forgetForm.again_pass"
              :type="password_type_forget2" placeholder="确认密码" name="password_forget2" tabindex="3" autocomplete="off"
              @keyup.native="checkCapslock(21, $event)" @blur="forget2_tooltip = false"
              @keyup.enter.native="handleForget" />
            <span class="show-pwd" @click="showPwd(21)">
              <svg-icon :icon-class="password_type_forget2 === 'password' ? 'eye' : 'eye-open' " />
            </span>
          </el-form-item>
        </el-tooltip>

        <div class="forget-footer">
          <el-button :class="forget_loading ? 'footer-active' : 'footer-default'" :loading="forget_loading"
            @click.native.prevent="handleForget()">确认</el-button>
        </div>
        <div class="back-login">
          <el-button @click="changeUserStatus(10)">返回</el-button>
        </div>
      </el-form>

      <!-- 4. 注册 -->
      <el-form v-show="user_status == 0" ref="regForm" :model="regForm" :rules="rules" autocomplete="off"
        label-position="left" v-loading="loading">
        <div class="title-register">注册</div>

        <el-form-item prop="username">
          <el-input ref="username" key="reg" v-model="regForm.username" placeholder="用户名" name="username" type="text"
            tabindex="1" autocomplete="off" @blur="usernameRepet()">
            <span id="span1" class="registered-tip" slot="suffix" v-text="username_has" />
          </el-input>
        </el-form-item>

        <el-form-item prop="userac">
          <el-input ref="userac" key="reg" v-model="regForm.userac" placeholder="邮箱/手机号" name="userac" type="text"
            tabindex="2" autocomplete="off" @blur="useracRepet(0)">
            <span id="span2" class="registered-tip" slot="suffix" v-text="userac_has" />
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-tooltip v-model="reg_tooltip" content="打开了大写!" placement="right" manual>
            <el-input :key="password_type_reg" ref="password" v-model="regForm.password" :type="password_type_reg"
              placeholder="6 - 16 位密码, 区分大小写" name="password" tabindex="3" autocomplete="off"
              @keyup.native="checkCapslock(0, $event)" @blur="reg_tooltip = false" />
          </el-tooltip>

          <span class="show-pwd" @click="showPwd(0)">
            <svg-icon :icon-class="   password_type_reg === 'password' ? 'eye' : 'eye-open' " />
          </span>
        </el-form-item>

        <el-form-item>
          <el-tooltip v-model="reg2_tooltip" content="打开了大写!" placement="right" manual>
            <el-input :key="password_type_reg2" ref="password_reg2" v-model="regForm.again_pass"
              :type="password_type_reg2" placeholder="确认密码" name="password_reg2" tabindex="4" autocomplete="off"
              @keyup.native="checkCapslock(1, $event)" @blur="reg2_tooltip = false" />
          </el-tooltip>
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="   password_type_reg2 === 'password' ? 'eye' : 'eye-open' " />
          </span>
        </el-form-item>

        <el-form-item prop="verify">
          <el-input key="verify" ref="verify" v-model="regForm.verify" type="text" placeholder="输入验证码" name="verify"
            tabindex="5" autocomplete="off" style="width: 60%" @keyup.enter.native="handleReg" />

          <div class="verify-mess" :class="verify_css(verify_reg_btn_disable)" @click="getVerifyMsg(0, regForm.userac)">
            {{ register_btn }}</div>
        </el-form-item>

        <div class="register-footer">
          <el-button :class="reg_loading ? 'footer-active' : 'footer-default'" :loading="reg_loading"
            @click.native.prevent="handleReg">注册</el-button>
          <div class="cut-login" @click="changeUserStatus(10)">
            <i class="el-icon-d-arrow-left"></i> 使用已有账户登录
          </div>
        </div>

        <!-- <div class="privacy">
          <el-checkbox v-model="check_contract" size="mini" />
          <span> 阅读并接受</span>
          <span class="contract" @click="showContract(1)">《用户协议》</span>
          <span>及</span>
          <span class="contract" @click="showContract(2)">《隐私权保护声明》</span>
        </div> -->
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    validMobile,
    validPass,
    validUser,
    validEmail,
  } from "@/utils/validate";
  import DragVerify from "./components/DragVerify";
  // import SocialSign from './components/SocialSignin'   // 三方账号登录
  import {
    phoneDuplicate,
    resetPass,
    loginPass,
    loginEmail,
    loginLegal,
    sendEmail,
    regEmail,
    resetPassEmail,
    emailRepet,
    phoneRepet,
    usernameRepet,
  } from "@/api/login";
  import SvgBackground from "@/components/SvgBackground/svg.vue"

  export default {
    name: "Login",
    components: {
      DragVerify,
      SvgBackground
    },
    // components: { SocialSign },
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!validUser(value)) {
          callback(new Error("3 - 16位, 非数字开头,字母和数字组合"));
        } else {
          callback();
        }
      };
      const validateUserac = (rule, value, callback) => {
        if (!validMobile(value) && !validEmail(value) && !validUser(value)) {
          callback(new Error("格式不正确!"));
        } else {
          callback();
        }
      };
      const validatePassword = (rule, value, callback) => {
        if (!validPass(value)) {
          callback(new Error("6~16位,包含大小写字母和数字, 可以有特殊字符"));
        } else {
          callback();
        }
      };
      const validateVerify = (rule, value, callback) => {
        if (value && value.length != 6) {
          callback(new Error("验证码为6位!"));
        } else {
          callback();
        }
      };
      return {
        img_url: {
          login_user: require("../../assets/img/login_user.png"),
          login_pass: require("../../assets/img/login_pass.png"),
          login_pass2: require("../../assets/img/login_pass2.png"),
          login_verify: require("../../assets/img/login_verify.png"),
        },
        user_status: 10, // 0用户注册  10用户用密码登录, 11用户用验证码登录  20重置密码
        down_time: 60, // 倒计时

        is_disabled: false,
        verify_random: 1790, // 验证码随机数
        rules: {
          username: [{
            required: true,
            trigger: "blur",
            validator: validateUsername
          }, ],
          userac: [{
            required: true,
            trigger: "blur",
            validator: validateUserac
          }, ],
          password: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
          verify: [{
            required: true,
            trigger: "blur",
            validator: validateVerify
          }, ],
        },

        loginForm: {
          // 1 密码登录======================================================================
          type: 1,
          userac: "", // 用户名 或 电话 或 邮箱
          password: "",
          verify: "",
          remember: false, // 是否记住密码
        },
        password_type: "password", // 控制密码的显隐
        login_tooltip: false, // 是否展示提示文字
        login_loading: false,

        redirect: undefined, // 登录成功后跳转的路径
        otherQuery: {},

        verifyForm: {
          // 2 验证码登录======================================================================
          type: 2,
          userac: "", // 用户的电话或邮箱
          verify_img: "",
          remember: false, // 是否记住密码
        },
        verify_btn: "获取验证码",
        verify_loading: false,
        verify_login_btn_disable: false,

        forgetForm: {
          // 3 忘记密码=====================================================================
          userac: "",
          password: "",
          again_pass: "",
          verify: "",
        },
        forget_btn: "获取验证码",
        verify_forget_btn_disable: false, // 禁用获取验证码按钮
        userac_forget_exist: -1, // 手机号或邮箱是否已经被注册
        password_type_forget: "password",
        password_type_forget2: "password",
        forget_tooltip: false, // 大写 ?
        forget2_tooltip: false, // 大写 ?
        forget_loading: false, // 忘记密码核查验证码,网络请求加载中

        regForm: {
          // 4 账户注册=====================================================================
          username: "",
          userac: "",
          password: "",
          again_pass: "",
          verify: "", // 验证码
        },
        register_btn: "获取验证码",
        verify_reg_btn_disable: false, // 禁用获取验证码按钮
        username_exist: -1, // 用户名是否已经被注册
        userac_exist: -1, // 手机号或邮箱是否已经被注册
        password_type_reg: "password",
        password_type_reg2: "password",
        reg_tooltip: false, // 大写 ?
        reg2_tooltip: false, // 大写 ?
        reg_loading: false,
        check_contract: false, // 是否勾选了 用户协议
        show_contract_privacy: 0, // 是否展示用户协议1 或 隐私声明2
        loading: false,
      };
    },
    computed: {
      buttonActive() {
        if (this.forgetForm.verify_img && !this.is_disabled) {
          return "verifyactive";
        } else {
          return "verifydefault";
        }
      },
      verify_css() {
        return (dis) => {
          if (!dis) {
            return "verifyactive";
          } else {
            return "verifydefault";
          }
        };
      },
      // 4.注册======
      // 用户是否已经存在
      username_has() {
        console.log("调用了吗 :>> ");
        if (this.username_exist == -1) return "";
        else if (this.username_exist == 0) return "已注册";
        else return "可用";
      },
      userac_has() {
        if (this.userac_exist == -1) return "";
        else if (this.userac_exist == 0) return "已注册";
        else return "未注册";
      },
      userac_forget_has() {
        if (this.userac_forget_exist == -1) return "";
        else if (this.userac_forget_exist == 0) return "已注册";
        else return "未注册";
      },
    },
    watch: {
      $route: {
        handler: function(route) {
          const query = route.query;
          if (query) {
            this.redirect = query.redirect;
            this.otherQuery = this.getOtherQuery(query);
          }
        },
        immediate: true,
      },
    },
    created() {
      // window.addEventListener('storage', this.afterQRScan)
    },
    mounted() {
      if (window.localStorage.getItem("checked")) {
        this.loginForm.remember = true;
        this.loginForm.password = window.localStorage.getItem("pwd");
        this.loginForm.userac = window.localStorage.getItem("user_accout");
      } else {
        this.loginForm.remember = false;
        this.loginForm.password = "";
        this.loginForm.userac = "";
      }

      // if (this.loginForm.userac === '') {
      //   this.$refs.userac.focus()
      // } else if (this.loginForm.password === '') {
      //   this.$refs.password.focus()
      // }
      // 获取图形验证码
      this.changeVerify();
    },
    destroyed() {
      // window.removeEventListener('storage', this.afterQRScan)
    },
    methods: {
      // 清空
      clearPW() {
        this.loginForm.userac = ''
        this.loginForm.password = ''
      },
      // 用户状态的改变
      changeUserStatus(status) {
        this.user_status = status;
        if (status == 0) {
          this.$nextTick(() => {
            this.ClearRegistration()
          })
        }
      },

      // 获取验证码 和 倒计时
      getVerifyMsg(num, phone) {
        console.log('有的调用了吗 :>> ')
        let temp; // 暂存: 用户名, 电话 或 邮箱

        if (num == 0 && this.verify_reg_btn_disable) return;
        else if (num == 11 && this.verify_login_btn_disable) return;
        else if (num == 20 && this.verify_forget_btn_disable) return;
        else if (num == 20 && !this.verify_forget_btn_disable) {
          if (this.userac_forget_exist != 0) {
            this.$message({
              message: "账号未注册",
              type: "error",
            });
            return;
          }
        }

        if (num == 0) {
          temp = this.regForm.userac;
          this.verify_reg_btn_disable = true;
        } else if (num == 11) {
          this.verify_login_btn_disable = true;
          temp = this.verifyForm.userac;
        } else if (num == 20) {
          this.verify_forget_btn_disable = true;
          temp = this.forgetForm.userac;
        }

        // var x = document.getElementById("span2")
        // console.log('x :>> ', x)

        if (document.getElementById("span2").innerHTML == "未注册") {
          const that = this;
          const interval = window.setInterval(() => {
            if (num == 0)
              that.register_btn = "重新获取(" + that.down_time + "秒)";
            else if (num == 11)
              that.verify_btn = "重新获取(" + that.down_time + "秒)";
            else if (num == 20)
              that.forget_btn = "重新获取(" + that.down_time + "秒)";

            --that.down_time;
            if (that.down_time < 0) {
              if (num == 0) {
                that.register_btn = "获取验证码";
                this.verify_reg_btn_disable = false;
              } else if (num == 11) {
                that.verify_btn = "获取验证码";
                this.verify_login_btn_disable = false;
              } else if (num == 20) {
                that.forget_btn = "获取验证码";
                this.verify_forget_btn_disable = false;
              }
              that.down_time = 60;
              window.clearInterval(interval);
            }
          }, 1000);

          if (!validMobile(temp) && !validEmail(temp)) {
            this.$message({
              message: "格式不正确",
              type: "error",
              duration: 4000,
            });
            if (num == 0) {
              that.register_btn = "获取验证码";
              this.verify_reg_btn_disable = false;
            } else if (num == 11) {
              that.verify_btn = "获取验证码";
              this.verify_login_btn_disable = false;
            } else if (num == 20) {
              that.forget_btn = "获取验证码";
              this.verify_forget_btn_disable = false;
            }
            that.down_time = 60;
            window.clearInterval(interval);
            // callback(new Error('格式不正确!'))
          } else {
            sendEmail({
                emailAddress: temp
              })
              .then((res) => {
                // 获取验证码的网络请求
                if (res.code == 0) {
                  this.forgetForm.verify_img = false;
                  this.regForm.verify_img = false;
                  this.$message({
                    message: "发送成功",
                    type: "success",
                    duration: 4000,
                    showClose: true,
                    center: true,
                  });
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                    duration: 4000,
                    showClose: true,
                    center: true,
                  });
                }
              })
              .catch((err) => {});
          }
        } else if (document.getElementById("span2").innerHTML == "") {
          this.$message({
            message: "邮箱未填写",
            type: "error",
            duration: 4000,
            showClose: true,
            center: true,
          });
        } else {
          this.$message({
            message: "邮箱已注册",
            type: "error",
            duration: 4000,
            showClose: true,
            center: true,
          });
        }
      },

      // 获取验证码 和 倒计时(验证码登录的)
      getVerifyMsg2(num, phone) {
        console.log('有的调用了吗 :>> ')
        let temp; // 暂存: 用户名, 电话 或 邮箱

        if (num == 0 && this.verify_reg_btn_disable) return;
        else if (num == 11 && this.verify_login_btn_disable) return;
        else if (num == 20 && this.verify_forget_btn_disable) return;
        else if (num == 20 && !this.verify_forget_btn_disable) {
          if (this.userac_forget_exist != 0) {
            this.$message({
              message: "账号未注册",
              type: "error",
            });
            return;
          }
        }

        if (num == 0) {
          temp = this.regForm.userac;
          this.verify_reg_btn_disable = true;
        } else if (num == 11) {
          this.verify_login_btn_disable = true;
          temp = this.verifyForm.userac;
        } else if (num == 20) {
          this.verify_forget_btn_disable = true;
          temp = this.forgetForm.userac;
        }

        // var x = document.getElementById("span2")
        // console.log('x :>> ', x)

          const that = this;
          const interval = window.setInterval(() => {
            if (num == 0)
              that.register_btn = "重新获取(" + that.down_time + "秒)";
            else if (num == 11)
              that.verify_btn = "重新获取(" + that.down_time + "秒)";
            else if (num == 20)
              that.forget_btn = "重新获取(" + that.down_time + "秒)";

            --that.down_time;
            if (that.down_time < 0) {
              if (num == 0) {
                that.register_btn = "获取验证码";
                this.verify_reg_btn_disable = false;
              } else if (num == 11) {
                that.verify_btn = "获取验证码";
                this.verify_login_btn_disable = false;
              } else if (num == 20) {
                that.forget_btn = "获取验证码";
                this.verify_forget_btn_disable = false;
              }
              that.down_time = 60;
              window.clearInterval(interval);
            }
          }, 1000);

          if (!validMobile(temp) && !validEmail(temp)) {
            this.$message({
              message: "格式不正确",
              type: "error",
              duration: 4000,
            });
            if (num == 0) {
              that.register_btn = "获取验证码";
              this.verify_reg_btn_disable = false;
            } else if (num == 11) {
              that.verify_btn = "获取验证码";
              this.verify_login_btn_disable = false;
            } else if (num == 20) {
              that.forget_btn = "获取验证码";
              this.verify_forget_btn_disable = false;
            }
            that.down_time = 60;
            window.clearInterval(interval);
            // callback(new Error('格式不正确!'))
          } else {
            sendEmail({
                emailAddress: temp
              })
              .then((res) => {
                // 获取验证码的网络请求
                if (res.code == 0) {
                  this.forgetForm.verify_img = false;
                  this.regForm.verify_img = false;
                  this.$message({
                    message: "发送成功",
                    type: "success",
                    duration: 4000,
                    showClose: true,
                    center: true,
                  });
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                    duration: 4000,
                    showClose: true,
                    center: true,
                  });
                }
              })
              .catch((err) => {});
          }
      },

      // 获取验证码 和 倒计时(忘记密码的)
      getVerifyMsg3(num, phone) {
        console.log('有的调用了吗 :>> ')
        let temp; // 暂存: 用户名, 电话 或 邮箱

        if (num == 0 && this.verify_reg_btn_disable) return;
        else if (num == 11 && this.verify_login_btn_disable) return;
        else if (num == 20 && this.verify_forget_btn_disable) return;
        else if (num == 20 && !this.verify_forget_btn_disable) {
          if (this.userac_forget_exist != 0) {
            this.$message({
              message: "账号未注册",
              type: "error",
            });
            return;
          }
        }

        if (num == 0) {
          temp = this.regForm.userac;
          this.verify_reg_btn_disable = true;
        } else if (num == 11) {
          this.verify_login_btn_disable = true;
          temp = this.verifyForm.userac;
        } else if (num == 20) {
          this.verify_forget_btn_disable = true;
          temp = this.forgetForm.userac;
        }

        // var x = document.getElementById("span2")
        // console.log('x :>> ', x)

          const that = this;
          const interval = window.setInterval(() => {
            if (num == 0)
              that.register_btn = "重新获取(" + that.down_time + "秒)";
            else if (num == 11)
              that.verify_btn = "重新获取(" + that.down_time + "秒)";
            else if (num == 20)
              that.forget_btn = "重新获取(" + that.down_time + "秒)";

            --that.down_time;
            if (that.down_time < 0) {
              if (num == 0) {
                that.register_btn = "获取验证码";
                this.verify_reg_btn_disable = false;
              } else if (num == 11) {
                that.verify_btn = "获取验证码";
                this.verify_login_btn_disable = false;
              } else if (num == 20) {
                that.forget_btn = "获取验证码";
                this.verify_forget_btn_disable = false;
              }
              that.down_time = 60;
              window.clearInterval(interval);
            }
          }, 1000);

          if (!validMobile(temp) && !validEmail(temp)) {
            this.$message({
              message: "格式不正确",
              type: "error",
              duration: 4000,
            });
            if (num == 0) {
              that.register_btn = "获取验证码";
              this.verify_reg_btn_disable = false;
            } else if (num == 11) {
              that.verify_btn = "获取验证码";
              this.verify_login_btn_disable = false;
            } else if (num == 20) {
              that.forget_btn = "获取验证码";
              this.verify_forget_btn_disable = false;
            }
            that.down_time = 60;
            window.clearInterval(interval);
            // callback(new Error('格式不正确!'))
          } else {
            sendEmail({
                emailAddress: temp
              })
              .then((res) => {
                // 获取验证码的网络请求
                if (res.code == 0) {
                  this.forgetForm.verify_img = false;
                  this.regForm.verify_img = false;
                  this.$message({
                    message: "发送成功",
                    type: "success",
                    duration: 4000,
                    showClose: true,
                    center: true,
                  });
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                    duration: 4000,
                    showClose: true,
                    center: true,
                  });
                }
              })
              .catch((err) => {});
          }
      },

      // 监听是否打开了大写
      checkCapslock(num, e) {
        const {
          key
        } = e;
        if (num == 10) {
          this.login_tooltip =
            key && key.length === 1 && key >= "A" && key <= "Z"; // 若开启大写则提示文字
        } else if (num == 20) {
          // 忘记密码: 设置新密码
          this.forget_tooltip =
            key && key.length === 1 && key >= "A" && key <= "Z"; // 若开启大写则提示文字
        } else if (num == 21) {
          // 忘记密码: 再次输入密码
          this.forget2_tooltip =
            key && key.length === 1 && key >= "A" && key <= "Z"; // 若开启大写则提示文字
        } else if (num == 0) {
          // 注册账号: 设置密码
          this.reg_tooltip = key && key.length === 1 && key >= "A" && key <= "Z"; // 若开启大写则提示文字
        } else if (num == 1) {
          // 注册账号: 再次输入密码
          this.reg2_tooltip = key && key.length === 1 && key >= "A" && key <= "Z"; // 若开启大写则提示文字
        }
      },
      // 是否显示密码
      showPwd(num) {
        if (num == 10) {
          this.password_type === "password" ?
            (this.password_type = "") :
            (this.password_type = "password");
          this.$nextTick(() => {
            // 待Dom更新完毕 获取到输入框焦点
            this.$refs.password.focus();
          });
        } else if (num == 20) {
          this.password_type_forget === "password" ?
            (this.password_type_forget = "") :
            (this.password_type_forget = "password");
          this.$nextTick(() => {
            // 待Dom更新完毕 获取到输入框焦点
            this.$refs.password_forget.focus();
          });
        } else if (num == 21) {
          this.password_type_forget2 === "password" ?
            (this.password_type_forget2 = "") :
            (this.password_type_forget2 = "password");
          this.$nextTick(() => {
            // 待Dom更新完毕 获取到输入框焦点
            this.$refs.password_forget2.focus();
          });
        } else if (num == 0) {
          this.password_type_reg === "password" ?
            (this.password_type_reg = "") :
            (this.password_type_reg = "password");
          this.$nextTick(() => {
            // 待Dom更新完毕 获取到输入框焦点
            this.$refs.password.focus();
          });
        } else if (num == 1) {
          this.password_type_reg2 === "password" ?
            (this.password_type_reg2 = "") :
            (this.password_type_reg2 = "password");
          this.$nextTick(() => {
            // 待Dom更新完毕 获取到输入框焦点
            this.$refs.password_reg2.focus();
          });
        }
      },
      // 滑块验证是否 成功
      verifyStatus(num, status) {
        if (num == 20 && status) this.forgetForm.verify_img = true;
        else if (num == 0 && status) this.regForm.verify_img = true;
      },
      // 1 账号登录 和 2验证码登录=======================================================================================
      handleLogin(num) {
        if (num == 10) {
          // 密码登录
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              const cryptograph = this.$sha256(this.loginForm.password + "dawk"); // 给密码加密
              let temp = {
                name: this.loginForm.userac,
                password: this.loginForm.password,
                type: this.loginForm.type,
                remember: this.loginForm.remember,
                cryptograph,
              };

              this.login_loading = true;
              this.$store
                .dispatch("user/login", temp)
                .then((res) => {
                  if (res == 1) {
                    // 待审核
                    this.$router.push({
                      path: "/corporation"
                    });
                  } else if (res == 2) {
                    // 完成企业信息
                    this.$router.push({
                      path: this.redirect || "/video",
                      query: this.otherQuery,
                    });
                  } else if (res == 3) {
                    // 未通过
                    this.$router.push({
                      path: "/corporation"
                    });
                  }

                  this.login_loading = false;
                })
                .catch((res) => {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                  this.login_loading = false;
                });
            } else {
              return false;
            }
          });
        } else if (num == 11) {
          this.$refs.verifyForm.validate((valid) => {
            if (valid) {
              let temp = {
                email: this.verifyForm.userac,
                type: this.verifyForm.type,
                remember: this.verifyForm.remember,
                verify: this.verifyForm.verify,
              };
              this.verify_loading = true;
              this.$store
                .dispatch("user/login", temp)
                .then((res) => {
                  if (res == 1) {
                    // 待审核
                    this.$router.push({
                      path: "/corporation"
                    });
                  } else if (res == 2) {
                    // 完成企业信息
                    this.$router.push({
                      path: this.redirect || "/",
                      query: this.otherQuery,
                    });
                  } else if (res == 3) {
                    // 未通过
                    this.$router.push({
                      path: "/corporation"
                    });
                  }

                  this.verify_loading = false;
                })
                .catch((res) => {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                  this.verify_loading = false;
                });
            } else {
              return false;
            }
          });
        }
      },

      // 获取请求参数
      getOtherQuery(query) {
        return Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
      },
      // 切换图形验证
      changeVerify() {
        let num = 0;
        while (num < 1000) {
          num = Math.random() * 10000;
        }
        this.verify_random = Math.floor(num);
      },

      // 3 忘记密码===========================================================
      handleForget() {
        this.$refs.forgetForm.validate((valid) => {
          if (valid) {
            if (this.userac_forget_exist != 0) {
              this.$message({
                message: "账号尚未注册!",
                type: "error",
                duration: 4000,
                showClose: true,
                center: true,
              });
            } else if (this.forgetForm.password != this.forgetForm.again_pass) {
              this.$message({
                message: "两次密码输入不一致!",
                type: "error",
                duration: 4000,
                showClose: true,
                center: true,
              });
            } else {
              const cryptograph = this.$sha256(this.forgetForm.password + "dawk");
              this.forget_loading = true;
              let temp = {
                email: this.forgetForm.userac,
                newPassword: cryptograph,
                emailCaptcha: this.forgetForm.verify,
              };
              // 发送重置密码的网络请求,
              resetPassEmail(temp)
                .then((res) => {
                  if (res.code == 0) {
                    this.$message({
                      message: "重置密码成功!",
                      type: "success",
                      duration: 4000,
                      showClose: true,
                      center: true,
                    });
                    // 成功之后
                    this.forget_loading = false;
                    this.user_status = 10;
                  }
                })
                .catch(() => {
                  this.forget_loading = false;
                });
            }
          } else {
            return false;
          }
        });
      },

      // 4. 注册========================================================================================
      // 用户名查重
      usernameRepet() {
        if (this.regForm.username && this.regForm.username.length > 2)
          usernameRepet({
            name: this.regForm.username
          })
          .then((res) => {
            if (res.code == 0) {
              this.username_exist = 1;
            } else if (res.code == -4) {
              this.username_exist = 0;
            }
          })
          .catch(() => {
            this.username_exist = -1;
          });
      },
      // 账号查重
      useracRepet(num) {
        if (num == 0) {
          // 0是注册
          if (this.regForm.userac && this.regForm.userac.length > 5)
            emailRepet({
              email: this.regForm.userac
            })
            .then((res) => {
              if (res.code == 0) {
                this.userac_exist = 1;
              } else if (res.code == -4) {
                this.userac_exist = 0;
              }
            })
            .catch(() => {
              this.userac_exist = -1;
            });
        } else if (num == 20) {
          // 20是忘记密码
          if (this.forgetForm.userac && this.forgetForm.userac.length > 5)
            emailRepet({
              email: this.forgetForm.userac
            })
            .then((res) => {
              if (res.code == 0) {
                this.userac_forget_exist = 1;
              } else if (res.code == -4) {
                this.userac_forget_exist = 0;
              }
            })
            .catch(() => {
              this.userac_forget_exist = -1;
            });
        }
      },
      // 清空注册信息
      ClearRegistration() {
        this.regForm = {
          username: "",
          userac: "",
          password: "",
          again_pass: "",
          verify: "",
        };
        this.$refs["regForm"].resetFields();
        document.getElementById("span1").innerHTML = "";
        document.getElementById("span2").innerHTML = "";
      },

      // 点击注册
      handleReg() {
        this.$refs.regForm.validate((valid) => {
          if (valid) {
            if (this.username_exist == 0) {
              this.$message({
                message: "用户名已被注册",
                type: "error",
                duration: 4000,
                showClose: true,
                center: true,
              });
            } else if (this.userac_exist == 0) {
              this.$message({
                message: "邮箱或手机号已被注册",
                type: "error",
                duration: 4000,
                showClose: true,
                center: true,
              });
            } else if (this.regForm.password != this.regForm.again_pass) {
              this.$message({
                message: "两次密码输入不一致!",
                type: "error",
                duration: 4000,
                showClose: true,
                center: true,
              });
            }
            // else if (!this.check_contract) {
            //   this.$message({
            //     message: '请阅读并勾选用户协议!',
            //     type: 'error',
            //     duration: 4000,
            //     showClose: true,
            //     center: true
            //   })
            // }
            else {
              const cryptograph = this.$sha256(this.regForm.password + "dawk"); // 密码加密

              let temp = {
                // 组装网络请求的参数
                groupInfoDO: {
                  id: "",
                  name: "",
                  type: "",
                },
                userInfoDO: {
                  name: this.regForm.username,
                  email: this.regForm.userac,
                  password: cryptograph,
                },
                emailCaptcha: this.regForm.verify,
              };
              this.reg_loading = true;
              // 发送注册的网络请求,
              this.loading = true;
              regEmail(temp)
                .then((res) => {
                  if (res.code == 0) {
                    this.$message({
                      message: "注册成功!",
                      type: "success",
                      duration: 4000,
                      showClose: true,
                      center: true,
                    });
                    // 成功之后
                    this.loading = false;
                    this.reg_loading = false;
                    // const my_mark = this.createRandomId()
                    // window.localStorage.setItem('phone' + my_mark, this.regForm.userac)
                    // window.localStorage.setItem('password' + my_mark, this.regForm.password)

                    // this.$router.replace({
                    //   path: '/corporation',
                    //   query: {
                    //     my_mark
                    //   }
                    // })
                    this.user_status = 10;
                    this.ClearRegistration();
                  } else {
                    this.loading = false;
                    this.reg_loading = false;
                    this.$message({
                      message: res.msg,
                      type: "error",
                      duration: 4000,
                      showClose: true,
                      center: true,
                    });
                    return;
                  }
                })
                .catch(() => {
                  this.reg_loading = false;
                  this.loading = false;
                });
            }
          } else {
            return false;
          }
        });
      },
      // 是否弹出  用户协议 或 隐私保护
      showContract(num) {
        this.show_contract_privacy = num;
      },
      //
      handleConsent(num, cst) {
        this.show_contract_privacy = 0;
        this.check_contract = cst;
      },
      // 随机生成不同的ID
      createRandomId() {
        return (
          (Math.random() * 10000000).toString(16).substr(0, 4) +
          "-" +
          new Date().getTime() +
          "-" +
          Math.random().toString().substr(2, 4)
        );
      },
    },
  };
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  @supports (-webkit-mask: none) and (not (cater-color: $text_dark)) {
    .login-container .el-input input {
      color: $text_dark;
    }
  }

  .login-container {
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: var(--app_primary);
      border-color: var(--app_primary);
    }

    .el-checkbox__input .el-checkbox__inner:hover {
      border-color: var(--app_primary);
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: var(--app_primary);
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: var(--app_primary);
    }

    .el-form-item {
      // background: rgba(0, 0, 0, 0);
      color: $text_dark;
      margin-bottom: 17px;

      .verify-img {
        cursor: pointer;
        display: inline-block;
        width: 60px;
        height: 35px;
        background-color: #bdbdbd;
        border: 2px solid #9a9a9a;
        opacity: 0.75;
        text-align: center;
        // 禁止选中
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    }

    .el-input {
      // background-color: salmon;
      display: inline-block;
      height: 47px;
      width: 100%;

      input {
        background: transparent;
        border: 1px solid $border_light;
        -webkit-appearance: none;
        // padding: 12px 5px 12px 15px;
        color: $text_dark;
        height: 40px;
        caret-color: $text_dark; // ###

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
          -webkit-text-fill-color: $text_dark !important;
        }
      }

      // input:-internal-autofill-selected {
      //   background: salmon !important;
      // }
      // .el-input__inner {
      //   background-color: transparent !important;
      // }
    }
  }
</style>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .login-container {
    // background: url(~@/assets/img/login_img.png) ;
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    // background-image: linear-gradient(to right top, rgba(7, 10, 52, 1), rgba(3, 24, 126, 1));
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 960px;
    min-height: 540px;
    overflow: hidden;
    background-color: #ffffff;
    // display: flex;
    // justify-content: center;
    // align-items: center;

    .login-head {
      // 登录页的头部
      height: 40px;
      background-color: $menuBg;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-size: 14px;

      .logo-title {
        // background-color: salmon;
        margin-left: 48px;

        .logo-img {
          width: 22px;
          height: 22px;
          margin-right: 5px;
        }

        .text {
          transform: translateY(-3px);
          display: inline-block;
          font-weight: 600;
        }
      }

      .avatar-account {
        cursor: pointer;
        // background-color: aqua;
        margin-right: 48px;

        &>span {
          font-size: 12px;
        }
      }
    }

    .reg-dialog {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 100;
      width: 100%;
      height: 100%;
      // min-width: 992px;
      // min-height: 540px;
      overglow: hidden;
      background-color: #ecf2f9;
      display: flex;
      align-items: center;
      justify-content: center;

      .dialog-content {
        // padding: 15px 0;
        border-top: 25px solid $my_white;
        border-bottom: 25px solid $my_white;
        width: 992px;
        height: 600px;
        min-width: 992px;
        min-height: 600px;
        background: $my_white;
        box-shadow: 0px 8px 29px 0px rgba(6, 55, 100, 0.5);
        border-radius: 20px;
        position: relative;
        padding: 25px 50px;
        margin: 0 auto;
        // overflow: hidden;
        word-break: break-all;
        word-wrap: break-word;
        overflow: auto;
        text-overflow: clip;

        .content-title {
          font-size: 28px;
          font-weight: 600;
        }

        .content-subhead {
          font-size: 18px;
          font-weight: 600;
        }

        .content-footer {
          margin-top: 30px;
          display: flex;
          justify-content: center;
        }
      }
    }

    .login-card {
      position: absolute;
      z-index: 2000;
      top: 19vh;
      right: 7.5vw;
      // transform: translateX(180px);
      // opacity: 0.9;
      width: 420px;
      // height: 500px;
      // background-color: $my_white;
      background-color: rgba(255, 255, 255, 1);
      // border: 1px solid $border_middle;
      border-radius: 5px;
      padding: 40px 50px;
      overflow: hidden;

      .title-container {
        position: relative;

        .title-text {
          color: var(--app_primary);
          font-weight: 600;
          text-align: center;
          font-size: 28px;
          margin-bottom: 20px;
        }

        .title-remark {
          font-size: 13px;
          color: $text_light;
          margin-bottom: 40px;
        }
      }

      .el-form {

        // background-color: aliceblue;
        .title-toggle {
          display: flex;
          justify-content: space-around;
          margin-bottom: 24px;

          .title-toggle-child {
            cursor: pointer;
            padding: 0 15px 8px;
          }

          .title_active {
            border-bottom: 3px solid var(--app_primary);
            color: var(--app_primary);
          }

          .title_default {}
        }

        .show-pwd {
          position: absolute;
          right: 10px;
          top: 7px;
          font-size: 16px;
          color: $text_light;
          cursor: pointer;
          user-select: none;
        }

        .verify-mess {
          cursor: pointer;
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-radius: 4px;
          display: inline-block;
          border: 1px solid $border_middle;
          font-size: 12px;
          // margin-left: 10px;
          float: right;
          // 禁止选中
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }

        .verifyactive {
          color: $text_light;
        }

        .verifydefault {
          color: #000;
        }

        .registered-tip,
        .forget-tip {
          line-height: 42px;
          color: $text_dark;
          font-weight: 400;
          opacity: 0.4;
          font-size: 12px;
        }

        .remember-forget {
          display: flex;
          justify-content: space-between;
          margin: 16px 0;

          .cut-forget {
            cursor: pointer;
            color: var(--app_primary);
          }
        }

        .login-footer,
        .forget-footer,
        .back-login,
        .register-footer {
          // 重置密码
          display: flex;
          justify-content: center;
          margin-bottom: 16px;

          .el-button {
            width: 100%;
            height: 40px;
            border-radius: 6px;
            font-size: 17px;
            color: $my_white;
            background-color: var(--app_primary);
          }

          .footer-active {
            // text-decoration: none !important;
          }

          .footer-default {
            // background: #0F8BFD;
          }
        }

        .back-login {

          // 重置密码-->返回到登录
          .el-button {
            background-color: $my_white;
            border: 1px solid var(--app_primary);
            color: var(--app_primary);
          }
        }

        .register-footer {
          // 注册
          justify-content: space-between;


          .el-button {
            width: 50%;
          }

          .cut-login {
            cursor: pointer;
            color: var(--app_primary);
            font-size: 13px;
            line-height: 40px;
          }
        }

        .cut-register {
          text-align: right;
          color: var(--app_primary);
          cursor: pointer;
        }

        .title-register,
        .title-forget {
          // 注册的标题, 忘记密码的标题
          font-weight: 700;
          font-size: 18px;
          margin-bottom: 20px;
        }
      }

      .privacy {
        font-size: 12px;
        margin-top: 7px;
        text-align: center;

        .contract {
          color: var(--app_primary);
          cursor: pointer;
        }
      }

      .svg-container {
        // background-color: rgba(15, 139, 253, 1);
        padding: 7px 3px 0 12px;
        // color: $dark_gray;
        vertical-align: middle;
        width: 30px;
        display: inline-block;

        img {
          width: 20px;
          height: 20px;
        }
      }

      // .dragverify {   // 拖动滑块验证
      //   margin-bottom: 23px;
      // }

      .change_view {
        padding-top: 15px;
        color: var(--app_primary);
        display: flex;
        justify-content: center;
        text-decoration: underline;
        font-size: 14px;

        .change-page {
          cursor: pointer;
        }
      }
    }

    .thirdparty-button {
      // 三方账号登录
      float: right;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
    }
  }
</style>
